<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-collapse" lay-filter="test">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                            <div class="layui-colla-content">
                                <form class="layui-form" action="">

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">选择省份</label>
                                            <div class="layui-input-inline">
                                                <select name="address1" id="address1" lay-filter="address1" >
                                                    <option value="全国">全国</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="天津市">天津市</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="内蒙古">内蒙古</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="广西">广西</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="重庆市">重庆市</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="西藏">西藏</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="宁夏">宁夏</option>
                                                    <option value="新疆">新疆</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline">
                                                <select name="address2" id="address2"  lay-filter="address2" disabled>
                                                    <option value="全国">全国</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="天津市">天津市</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="内蒙古">内蒙古</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="广西">广西</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="重庆市">重庆市</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="西藏">西藏</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="宁夏">宁夏</option>
                                                    <option value="新疆">新疆</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline">
                                                <select name="address3" id="address3" lay-filter="address3" disabled>
                                                    <option value="全国">全国</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="天津市">天津市</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="内蒙古">内蒙古</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="广西">广西</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="重庆市">重庆市</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="西藏">西藏</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="宁夏">宁夏</option>
                                                    <option value="新疆">新疆</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline">
                                                <select name="address4" id="address4" lay-filter="address4" disabled>
                                                    <option value="全国">全国</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="天津市">天津市</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="内蒙古">内蒙古</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="广西">广西</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="重庆市">重庆市</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="西藏">西藏</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="宁夏">宁夏</option>
                                                    <option value="新疆">新疆</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline">
                                                <select name="address5" id="address5" disabled lay-filter="address5">
                                                    <option value="全国">全国</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="天津市">天津市</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="内蒙古">内蒙古</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="广西">广西</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="重庆市">重庆市</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="西藏">西藏</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="宁夏">宁夏</option>
                                                    <option value="新疆">新疆</option>
                                                </select>
                                            </div>

                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">首选科目</label>
                                            <div class="layui-input-block">
                                                <input type="radio" name="firstType" value="物理类" title="物理类" checked="">
                                                <input type="radio" name="firstType" value="历史类" title="历史类">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">再选科目</label>
                                            <div class="layui-input-block">
                                                <input type="checkbox" name="twoType" value="政治"  title="政治">
                                                <input type="checkbox" name="twoType" value="地理"  title="地理">
                                                <input type="checkbox" name="twoType" value="生物"  title="生物">
                                                <input type="checkbox" name="twoType" value="化学"  title="化学">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">考试成绩</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text"  id="score" name="score"  lay-filter="score" placeholder="" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <a class="layui-btn" id="sub2">查看</a>
                                            </div>
                                            <div class="layui-input-inline" style="width: 200px;">
                                                <div id="msg1"></div>
                                            </div>

                                        </div>


                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">专业门类</label>
                                        <div class="layui-input-block">
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryPid" id="categoryPid" lay-filter="categoryPid" lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryId" id="categoryId" lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryId2" id="categoryId2" lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>

                                        </div>

                                        <div class="layui-input-block">
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryPid2" id="categoryPid2" lay-filter="categoryPid2" disabled lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryId21" id="categoryId21" disabled lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryId22" id="categoryId22" disabled lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-input-block">
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryPid3" id="categoryPid3" lay-filter="categoryPid3" disabled lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryId31" id="categoryId31" disabled lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="width: 120px">
                                                <select name="categoryId32" id="categoryId32" disabled lay-search>
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                            <a class="layui-btn" href="../download">下载志愿表</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>



    layui.use(['form', 'layer','table'],

        function() {
            $ = layui.jquery;
            var form = layui.form,
                table = layui.table,
                layer = layui.layer;

                $("#sub2").click(function () {
                    $.get("/query2?firstType="+$("input[name='firstType']:checked").val()+"&score="+$("#score").val(),
                        function (data) {
                            $("#msg1").text(data);
                        });
                });


            form.on('select(address1)', function(data) {
                var address1 = $("select[name=address1]").val();
                if (address1!='全国'){
                    $('#address2').addClass("layui-btn-disabled").attr("disabled",false);
                    form.on('select(address2)', function(data) {
                        var address2 = $("select[name=address2]").val();
                        if (address2!='全国'&&address2!=address1) {
                            $('#address3').addClass("layui-btn-disabled").attr("disabled", false);
                            form.on('select(address3)', function(data) {
                                var address3 = $("select[name=address3]").val();
                                if (address3!='全国'&&address3!=address1&&address3!=address2) {
                                    $('#address4').addClass("layui-btn-disabled").attr("disabled", false);
                                    form.on('select(address4)', function(data) {
                                        var address4 = $("select[name=address4]").val();
                                        if (address4!='全国'&&address4!=address1&&address4!=address2&&address4!=address3) {
                                            $('#address5').addClass("layui-btn-disabled").attr("disabled", false);
                                        }
                                        form.render("select");

                                    });
                                }
                                form.render("select");

                            });
                        }
                        form.render("select");

                    });
                }
                form.render("select");

            });




            $.ajax({
                url: "/category/selectAllPid",
                dataType: 'json',
                type: 'get',
                success: function (data) {

                    $.each(data, function (index, item) {
                        $('#categoryPid').append(new Option(item.categoryPid));// 下拉菜单里添加元素
                        $('#categoryPid2').append(new Option(item.categoryPid));// 下拉菜单里添加元素
                        $('#categoryPid3').append(new Option(item.categoryPid));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });


            //分类二级下拉框
            form.on('select(categoryPid)', function() {
                var categoryPid = $('#categoryPid').val();
                $.ajax({
                    url: '/category/selectAllByPid?pid=' + categoryPid,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        $('#categoryId').empty();
                        $('#categoryId2').empty();
                        $.each(data, function (index, item) {
                            $('#categoryId').append(new Option(item.categoryId));// 下拉菜单里添加元素
                            $('#categoryId2').append(new Option(item.categoryId));
                        });
                        form.render("select");
                    }

                });
                var categoryPid=$('#categoryPid').val();
                if (categoryPid!=""){
                    $('#categoryPid2').addClass("layui-btn-disabled").attr("disabled",false);
                    $('#categoryId21').addClass("layui-btn-disabled").attr("disabled",false);
                    $('#categoryId22').addClass("layui-btn-disabled").attr("disabled",false);
                }

            });
            form.on('select(categoryPid2)', function() {
                var categoryPid = $('#categoryPid2').val();
                $.ajax({
                    url: '/category/selectAllByPid?pid=' + categoryPid,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        $('#categoryId21').empty();
                        $('#categoryId22').empty();
                        $.each(data, function (index, item) {
                            $('#categoryId21').append(new Option(item.categoryId));// 下拉菜单里添加元素
                            $('#categoryId22').append(new Option(item.categoryId));
                        });
                        form.render("select");
                    }
                });
                var categoryPid=$('#categoryPid').val();
                var categoryPid2=$('#categoryPid2').val();
                if (categoryPid!=""&&categoryPid2!=categoryPid){
                    $('#categoryPid3').addClass("layui-btn-disabled").attr("disabled",false);
                    $('#categoryId31').addClass("layui-btn-disabled").attr("disabled",false);
                    $('#categoryId32').addClass("layui-btn-disabled").attr("disabled",false);
                }
            });
            form.on('select(categoryPid3)', function() {
                var categoryPid = $('#categoryPid3').val();
                $.ajax({
                    url: '/category/selectAllByPid?pid=' + categoryPid,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        $('#categoryId31').empty();
                        $('#categoryId32').empty();
                        $.each(data, function (index, item) {
                            $('#categoryId31').append(new Option(item.categoryId));// 下拉菜单里添加元素
                            $('#categoryId32').append(new Option(item.categoryId));

                        });
                        form.render("select");
                    }
                });
            });


            table.render({
                id:"dataTable",//
                elem: '#layui_table_id',//指定表格元素
                url: '/write',  //请求路径
                cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
                ,even: false    //隔行换色
                ,page: false  //开启分页
                ,limit: Number.MAX_VALUE //每页默认显示的数量
                ,method:'post'  //提交方式
                ,cols: [[
                    {type:'checkbox'}, //开启多选框
                    {field: 'address', title: '所在地', width:70},
                    {field: 'xname', title: '首选', width:70},
                    {field: 'ename', title: '再选课目', width:100},
                    {field: 'remark', title: '备注', width:60},
                    {field: 'feature', title: '学校特色', width:80},
                    {field: 'group_name', title: '专业组名称', width:200},
                    {field: 'group_code', title: '专业组代码', width:150},
                    {field: 'min_score', title: '分数', width:70},
                    {field: 'ranking', title: '排名', width:70},
                    {field: 'get_num', title: '人数', width:70}
                ]]

            });


            //监听提交
            form.on('submit(sub)',
                function(data) {
                    console.log(data);
                    var index=layer.load(1);
                    var twoType="";
                    var types = $("input[name='twoType']:checked");
                    if(types.length !=2 ){
                        layer.msg('再选科目只能选择两项！',{icon: 5,time:1000});
                    }
                    types.each(function () {
                        twoType += $(this).val()+",";
                    })

                    data.field.address=$('#address1').val()+','+$('#address2').val()+','+$('#address3').val()+','+$('#address4').val()+','+$('#address5').val();

                    data.field.twoType = twoType.substring(0,twoType.length-1);
                    data.field.categoryId=$('#categoryId').val()+','+$('#categoryId2').val()+','+$('#categoryId21').val()+','+$('#categoryId22').val()+','+$('#categoryId31').val()+','+$('#categoryId32').val();
                    // data.field.categoryId2=$('#categoryId2').val()+','+$('#categoryId22').val()+','+$('#categoryId32').val();
                    //发异步，把数据提交给java后台
                    $.ajax({
                        url: "/write",
                        data: data.field,
                        method: "post",
                        success :function (data) {
                            var d = data.data;
                            table.render({
                                elem: '#layui_table_id',//指定表格元素
                                data:d,
                                cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                                ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
                                ,even: false    //隔行换色
                                ,page: false  //开启分页
                                ,limit: Number.MAX_VALUE //每页默认显示的数量
                                ,cols: [[
                                    {type:'checkbox'}, //开启多选框
                                    {field: 'address', title: '所在地', width:70},
                                    {field: 'xname', title: '首选', width:70},
                                    {field: 'ename', title: '再选课目', width:100},
                                    {field: 'remark', title: '备注', width:60},
                                    {field: 'feature', title: '学校特色', width:80},
                                    {field: 'group_name', title: '专业组名称', width:200},
                                    {field: 'group_code', title: '专业组代码', width:150},
                                    {field: 'min_score', title: '分数', width:70},
                                    {field: 'ranking', title: '排名', width:70},
                                    {field: 'get_num', title: '人数', width:70}
                                ]],
                                done: function(res, curr, count) {
                                    let even_color = "#E0FFFF";
                                    let odd_color = "#f5fff5";
                                    let hover_color = "#E6E6FA";
                                    res.data.forEach(function(item, index) {
                                        if (index <10) {
                                            //2.设置当前行背景颜色
                                            $('.layui-table').find('tr[data-index="' + index + '"]').css('background-color',odd_color);
                                        }else if(index<30){
                                            $('.layui-table').find('tr[data-index="' + index + '"]').css('background-color',even_color);
                                        }else if(index<40){
                                            $('.layui-table').find('tr[data-index="' + index + '"]').css('background-color',hover_color);
                                        }
                                    });
                                    layer.close(index);
                                }
                            });
                        }
                    })
                    return false;
                });

        });</script>

</html>